<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>考勤表</title>
    <!--layui引用-->
    <script src="/common/util/layui/layui.js"></script>
    <link rel="stylesheet" href="/common/util/layui/css/layui.css">
</head>
<body>
<div class="layui-form-item">
    <div class="demoTable">
        <div class="layui-inline">
            <label class="layui-form-label">学号</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input class="layui-input" name="id" id="demoReload" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input class="layui-input" name="id" id="demoName" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">入学日期</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="demoDate" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
    </div>
</div>
<!--表格-->
<table class="layui-hide" id="test" lay-filter="test"></table>
<script>
    layui.use(['table','laydate'], function(){
        var table = layui.table;
        var laydate = layui.laydate;
        //日期范围
        laydate.render({
            elem: '#demoDate'
            ,range: true
        });

        //展示已知数据
        table.render({
            elem: '#test'
            ,cellMinWidth: 80
            ,url:'/atb/attendance.do'
            // ,toolbar: true
            ,page: true
            ,cols: [[ //标题栏
                {checkbox: true, fixed: true}
                ,{field:'no', title:'学号'}
                ,{field:'name', title:'姓名'}
                ,{field:'time', title:'入学时间'}
                ,{field:'state', title:'考勤情况'}
                ,{field:'note', title:'备注'}
                ,{field:'date', title:'考勤日期', sort: true}
            ]]
            ,even: true
            ,id: 'testReload'
        });

        //搜索
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                var demoName = $('#demoName');
                var demoDate = $('#demoDate');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            //搜索学号参数no[no]
                            no: demoReload.val(),
                            name: demoName.val(),
                            date: demoDate.val()
                        }
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>